<template>
  <transition name="move">
    <div class="food-detail" v-if="showFlag">
      <scroll class="food-scroll" :listen-scroll="listenScroll" :probe-type="probeType" :data="food.ratings">
        <div class="inner-wrapper">
          <div class="image-header">
            <img class="pic" :src="food.image" alt="">
            <div class="back" @click="hide">
              <i class="icon icon-arrow_lift"></i>
            </div>
          </div>

          <div class="content">
            <h1 class="title">{{food.name}}</h1>
            <div class="detail">
              <span class="sell-count">月售{{food.sellCount}}</span>
              <span class="rating">好评率{{food.rating}}</span>
            </div>
            <div class="price">
              <span class="now">￥{{food.price}}</span>
              <span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
            </div>

            <div class="cartcontrol-wrapper">
              <cartcontrol :food="food" @cartAdd="handleCartAdd" />
            </div>

            <transition name="fade">
              <div 
                class="buy" 
                v-show="!food.count"
                @click="addFirstFood"
              >
                加入购物车
              </div>
            </transition>
            
          </div>

          <split-space v-show="food.info" />

          <div class="desc" v-show="food.info">
            <div class="title">{{food.name}}</div>
            <div class="info">{{food.info}}</div>
          </div>
          
          <split-space />

          <div class="rating">
            <h1 class="title">商品评价</h1>
            <rating-select
              :ratings="food.ratings"
              :select-type="selectType"
              :only-content="onlyContent"
              :desc="desc"
              @changeCurrentSelectType="handleSelectTypeChange"
              @changeOnlyContent="handleContentChnage"
            />
            
            <div class="rating-wrapper">
              <ul v-show="food.ratings.length">
                <li
                  class="rating-item border-bottom"
                  v-show="needShow(rating.rateType, rating.text)"
                  v-for="(rating, index) in food.ratings" 
                  :key="index"
                >
                  <div class="user">
                    <div class="name">{{rating.username}}</div>
                    <img class="avatar" :src="rating.avatar" width="12" height="12" alt="">
                  </div>
                  <div class="time">{{rating.rateTime | formatDate}}</div>
                  <p class="text">
                    <span :class="['icon', {'icon-thumb_up': rating.rateType === 0, 'icon-thumb_down': rating.rateType === 1}]"></span>
                    {{rating.text}}
                  </p>
                </li>
              </ul>
              <div class="no-rating" v-show="!food.ratings.length">
                暂无评价
              </div>
            </div>
          </div>
          
        </div>
      </scroll>
    </div>
  </transition>
</template>

<script>
import Vue from 'vue'
import Scroll from '@/base/scroll/scroll'
import Cartcontrol from '@/components/cartcontrol/cartcontrol'
import SplitSpace from '@/components/split-space/split-space'
import RatingSelect from '@/components/rating-select/rating-select'
import { formateDateTo } from '@/assets/js/date.js'


// const POSITIVE = 0
// const NEGATIVE = 1
const ALL = 2


export default {
  name: 'FoodDetail',
  data() {
    return {
      showFlag: false,
      listenScroll: true,
      probeType: 3,
      selectType: ALL,
      onlyContent: true,
      desc: {
        all: '全部',
        positive: '推荐',
        negative: '吐槽'
      }
    }
  },
  props: {
    food: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  methods: {
    show() {
      this.showFlag = true
      this.selectType = ALL
      this.onlyContent = true
    },
    hide() {
      this.showFlag = false
    },
    addFirstFood(e) {
      Vue.set(this.food, 'count', 1)
      this.$emit("cartAdd", e.target)
    },
    handleCartAdd(target) {
      this.$emit("cartAdd", target)
    },
    handleSelectTypeChange(currentSelectType) {
      this.selectType = currentSelectType
    },
    handleContentChnage(currentContentType) {
      this.onlyContent = currentContentType
    },
    needShow(type, text) {
      
      if(this.onlyContent && !text) return false
      
      if(this.selectType === ALL) {
        return true
      } else {
        return type === this.selectType
      }
    }
  },
  filters: {
    formatDate(time) {
      let date = new Date(time)
      return formateDateTo(date, 'yyyy-MM-dd hh:mm')
    }
  },
  components: {
    Scroll,
    Cartcontrol,
    SplitSpace,
    RatingSelect
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/stylus/mixin.styl'
  .food-detail
    position fixed
    left 0
    top 0
    bottom 48px
    width 100%
    background #ffffff
    z-index 8
    .food-scroll
      width 100%
      height 100%
    &.move-enter-active
    &.move-leave-active
      transition all .5s
    &.move-enter
    &.move-leave-to
      transform translate3d(100%, 0, 0)
    .image-header
      position relative
      width 100%
      height 0
      padding-bottom 100%
      .pic 
        position absolute
        top 0
        left 0
        width 100%
        height 100%
      .back
        position absolute
        top 10px
        left 5px
        .icon
          display block
          padding 8px
          border-radius 50%
          background rgba(255,255,255,.2)
          font-size 20px
          color #ffffff
    .content
      padding 18px
      position relative
      .title
        line-height 14px
        margin-bottom 8px
        font-size 14px
        font-weight 700
        color rgb(7,17,27)
      .detail
        margin-bottom 18px
        height 10px
        line-height 10px
        font-size 0
        .sell-count
        .rating
          font-size 10px
          color rgb(147,153,159)
        .sell-count
          margin-right 12px
      .price
        font-weight 700
        line-height 24px
        .now
          margin-right 18px
          font-size 14px
          color rgb(240,20,20)
        .old
          text-decoration line-through
          font-size 10px
          color rgb(147,153,159)
      .cartcontrol-wrapper
        position absolute
        right 12px
        bottom 12px
      .buy
        position absolute
        right 18px
        bottom 18px
        height 24px
        padding 0 12px
        border-radius 12px
        box-sizing border-box
        background rgb(0,160,220)
        line-height 24px
        font-size 12px
        color #ffffff
        z-index 10
        &.fade-enter-active
        &.fade-leave-active
          transition opacity .5s
        &.fade-enter
        &.fade-leave-to
          opacity 0
    .desc
      padding 18px
      .title
        margin-bottom 6px
        line-height 14px
        font-size 14px
        color rgb(7,17,27)
      .text
        line-height 24px
        padding 0 8px
        font-size 12px
        color rgb(77,85,93)
    .rating
      padding-top 18px
      .title
        margin-left 18px
        line-height 14px
        font-size 14px
        color rgb(7,17,27)
      .rating-wrapper
        padding 0 18px
        .rating-item
          position relative
          padding 16px 0
          border-color(rgba(7,17,27,.1))
          .user
            position absolute 
            right 0
            top 16px
            line-height 12px
            font-size 0
            .name
              display inline-block
              margin-right 6px
              vertical-align top
              font-size 10px
              color rgb(147,153,159)
            .avatar
              border-radius 50%
          .time
            margin-bottom 6px
            line-height 12px
            font-size 10px
            color rgb(147, 153, 159)
          .text
            line-height 16px
            font-size 12px
            color rgb(7,17,27)
            .icon
              margin-right 4px
              font-size 12px
              &.icon-thumb_up
                color rgb(0, 160, 220)
              &.icon-thumb_down
                color rgb(147, 153, 159)
        .no-rating
          padding 16px 0
          font-size 12px
          color rgb(147, 153, 159)
</style>
